<template>
  <div class="chat-page-content">
    <!-- 聊天列表 -->
    <div class="chat-wrap">
      <div class="chat-wrap_list" :class="[item.isSelf ? 'is-right' : 'is-left']" v-for="(item, index) in chatList" :key="index">
        <div class="chat-wrap_list--avatar">
          <img :src="item.isSelf ? wechatImg : `${ossImgUrl}contact.png`" alt="" />
        </div>
        <div class="chat-wrap_list--content">
          <template v-if="item.isRichText">
            <div v-html="item.content"></div>
          </template>
          <template v-else>
            <div>{{ item.content }}</div>
          </template>
        </div>
      </div>
    </div>
    <!-- 填充 -->
    <div class="flex-1"></div>
    <!-- 聊天按钮列表 -->
    <div class="button-wrap" v-if="!showChatButton">
      <div class="button-wrap_list button-common" v-for="(item, index) in options.chatButtonList" :key="index" @click="onChoose(item)">{{ item.label }}</div>
    </div>
    <!-- 联系客服按钮 -->
    <div v-if="showChatButton" class="wechat-button button-common" @click="jumpWechatContact()">点此添加客服微信</div>
  </div>
</template>

<script>
import { ossImgUrl } from "@/config";
import wechatImg from "@/assets/wechat.png";

export default {
  props: {
    view: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      ossImgUrl,
      wechatImg,

      chatList: [],
      showChatButton: false,
    };
  },
  computed: {
    config() {
      return this.$store.getters["open/config"];
    },
    isMiniprogram() {
      const uniEnv = this.$uni.env;
      return uniEnv.miniprogram;
    },
    options() {
      return this.view.options;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const _options = this.view.options;
      console.info("_options", _options);

      this.chatList = [
        {
          content: _options.welcome_text,
          isRichText: true,
        },
        {
          content: _options.welcome_sub_text,
        },
      ];
    },
    // 跳转微信客服
    jumpWechatContact() {
		this.skipAdMp(this.options)
		return false
    },
    // 选择聊天话术
    onChoose(item) {
      this.showChatButton = true;

      this.chatList.push({
        content: item.label,
        isSelf: true,
      });

      setTimeout(() => {
        this.chatList.push({
          content: item.value,
        });
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-page-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .flex-1 {
    flex: 1;
    min-height: 40px;
  }
}
.chat-wrap {
  &_list {
    display: flex;
    align-items: flex-end;
    margin: 20px 24px;
    &.is-right {
      flex-direction: row-reverse;
      .chat-wrap_list--avatar {
        margin-right: 0;
        margin-left: 16px;
      }
      .chat-wrap_list--content {
        background-color: #75f808;
        border-radius: 16px 16px 0 16px;
      }
    }
    &--avatar {
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      margin-right: 16px;
    }
    &--content {
      padding: 10px 16px;
      background-color: #fff;
      line-height: 1.5;
      font-size: 16px;
      color: #333;
      border-radius: 16px 16px 16px 0;
      box-shadow: 2px 6px 6px #eee;
      letter-spacing: 2px;
    }
  }
}

.button-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  &_list {
    width: 48%;
    height: 44px;
    margin-top: 20px;
  }
}

.wechat-button {
  width: calc(100% - 48px);
  height: 50px;
  margin: 20px 24px;
  font-weight: 600;
  letter-spacing: 1px;
}

.button-common {
  // font-weight: 600;
  font-size: 16px;
  background-color: #48c158;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  box-shadow: 2px 4px 6px #e3e493;
}

img {
  display: block;
  width: 100%;
}
</style>
